<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <label class="label" >级编：</label>
                <el-input class="handle-input1" v-model="form.classNumber" />
                <label class="label" >班级名称：</label>
                <el-input class="handle-input1" v-model="form.className"/>
                <el-input class="handle-input" v-model="form.organ" placeholder="所属机构">
                    <template #append>
                        <el-select v-model="form.organ" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.organizations"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                </el-select>
                    </template>
                </el-input>
                <el-input class="handle-input" v-model="form.branch" placeholder="所属分支">
                    <template #append>
                        <el-select v-model="form.branch" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.branch"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>
                    </el-input>
                <el-input class="handle-input" v-model="form.major" placeholder="专业方向">   
                    <template #append>          
                        <el-select  v-model="form.major" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.branch"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>   
                </el-input>
                    <el-button color="#0ab394" class="handle-btn"  @click="handleSearch">查询</el-button>
                </div>
                <el-table ref="multipleTableRef" 
                    :header-cell-style="{color:'#2A62BC'}"
                     :data="tableData"   
                     style="width: 100%;" 
                     height="380"
                    size="small"
                    border
                    @selection-change="handleSelectionChange">
                    <el-table-column   type="selection" width="35" />
                    <el-table-column  prop="classNumber" label="班级编号"  ></el-table-column>
                    <el-table-column prop="className" label="班级名称"></el-table-column>
                    <el-table-column prop="major" label="专业方向"></el-table-column>
                    <el-table-column prop="organ" label="所属机构"></el-table-column>
                    <el-table-column prop="branch" label="所属分支"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
               
                    <el-table-column label="操作" width="280" align="center" >
                        <template #default="scope">
                            <el-row class="right-btn">
                                <el-button color="#0ab394"  @click="inClazz(scope.row)" >
                                   进入班级</el-button>
                               
                            </el-row>
                            <!-- </el-button-group> -->
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                    :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :page-sizes="[5, 10, 15, 20]"
                        :small="small"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal"
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"/>
                </div>
        </div>
    
           
            <!-- </div> -->
        </div>
    </template>
    
<script setup lang="ts">
    import { ref, reactive,toRefs } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
    import {getTeachingData} from '../../api/teaching' ;
    import { useRouter } from 'vue-router';
    let props = defineProps({
         isZi:Boolean,
    })
    const {isZi} = toRefs(props)
    const emit = defineEmits(['update:isZi'])
    const inClazz=(row)=>{
         emit('update:isZi',false)
    }   

 
    let form = reactive({
    id:'',
    classNumber:'', 
    className:'' ,
    organ:'' ,
    branch:'',
    startTime:'' ,
    endTime: '',
    major:''
});
    const options = reactive({
    organizations:[
        {
            value: '萍乡学院',
            label: '萍乡学院',
          },
      {
        value: '新舍学院',
        label: '新舍学院',
      },
      {
        value: '宜春学院',
        label: '宜春学院',
      },
      {
        value: '九江学院',
        label: '九江学院',
      },
      ],
      branch:[{
        value: '英语',
        label: '英语',
          },
      {
        value: '书法',
        label: '书法',
      },
      {
        value: '钢琴',
        label: '钢琴',
      },
      {
        value: 'flyme',
        label: 'flyme',
      },],
      
      dirs:[{
        value: '英语',
        label: '英语',
          },
      {
        value: '书法',
        label: '书法',
      },
      {
        value: '钢琴',
        label: '钢琴',
      },
      {
        value: 'flyme',
        label: 'flyme',
      },],
      schemas:[{
        value: 'JAVA',
        label: 'JAVA',
          },
      {
        value: 'Android',
        label: 'Android',
      },
      {
        value: 'mysql',
        label: 'mysql',
      },],
      
    }
    )
        
    //分页字体
    const small = ref(true)
    // const size = ref<'default' | 'large' | 'small'>('default')
    
    //分页数据
    const query = reactive({
        pageIndex: 1,
        pageSize: 5,
    });
    //
    
    //表格数据
    const tableData = ref();
    //总页数
    const pageTotal = ref(0);
    const multipleTableRef = ref()
    const state = reactive({
        multipleSelection:[]
    })
    
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getTeachingData({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
            console.log(res,"---res---")
            // tableData.value = res.data.
            let start  = (query.pageIndex-1)*query.pageSize;//开始位置
            let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
            tableData.value = res.data.slice(start,end);
            // tableData.value = res.data;
            pageTotal.value = res.data.length
        })    
    };
    getData();
    //多选框权限
    const handleSelectionChange = (val) => {
      state.multipleSelection = val
    }
    // 分页导航
    const handleSizeChange = (val) => {
      // console.log(`${val} items per page`)
      query.pageSize = val;
      getData()
    }
    const handlePageChange = (val) => {
        query.pageIndex = val;
        console.log(val,"==")
        console.log(query.pageSize)
        getData()
    };
    
   //查询按钮
   const  handleSearch =()=>{
     
   } 

    
    
    </script >
    <style lang="less" scoped>
    .handle-box {
        margin-bottom: 20px;   
        .handle-btn{
            margin-left: 8px;
        }         
    }

    .handle-input {
        width:165px;
        margin-right: 8px;
    }
    .handle-input1 {
        width:125px;
        margin-right: 8px;
    }
    .label{
       display: inline-block;
       max-width:100%;
       margin: 5px;
       font-weight: 700; 
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #F56C6C;
    }
    .blue {
        color: #1296e2;
        font-weight: bold;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .cell{
        display: inline-block;
        .el-button{
            margin-left: 0px;
        }
    }
    .el-col {
      border-radius: 4px;
      margin-left: 10px;
    }
    .el-button-group{
        float: right;
    }
    .top-btn{
        float: right;
        .el-button{
            margin-left: 5px;
        }
    }
    .right-btn{
         justify-content:center;
        .el-button{
            height: 21px;
            // width: 60px;
            margin-right: 6px;
            padding: 1px 5px;
            font-size: 12px;
        }
    }
    
    
    </style>